<!DOCTYPE html>
<html lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>M3u8Player</title>
<style>
 body {
    background-color: #333333
 }
 #myvideo,#myvideodiv{
    margin:auto;
    width:1366px;
    height:768px;
 }
</style>
</head>
<body>
<!-- <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> -->
<script src="hls.min.js"></script> <!-- // 必须！！！ -->
<div id="myvideodiv">
    <video id="myvideo" controls="controls"></video>
</div>
<script>
function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
        }
    }
    return theRequest;
} 

// 调用Querystring
var Request = new Object();
Request = GetRequest();
var name,age;
name = Request['name'];
age = Request['age'];
m3u8_url = Request['url']
// HLS
  if(Hls.isSupported()) {
    var video = document.getElementById('myvideo'); // 获取 video 标签
    var hls = new Hls(); // 实例化 Hls 对象
    hls.loadSource(m3u8_url || 'index.m3u8.local'); // 传入路径
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play(); // 调用播放 API
  });
 }
</script>
</body>
</html>
